<!--
 * @Description: 用户注册组件
 * @Author: hai-27
 * @Date: 2020-02-19 22:20:35
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-01 15:34:34
 -->
<template>
  <div id="register">
    <el-dialog title="注册" width="300px" center :visible.sync="isRegister">
      <el-form
          :model="RegisterUser"
          :rules="rules"
          status-icon
          ref="ruleForm"
          class="demo-ruleForm"
      >
        <!-- 用户名 -->
        <el-form-item prop="name">
          <el-input
              prefix-icon="el-icon-user-solid"
              placeholder="请输入账号"
              v-model="RegisterUser.name"
          ></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="pass">
          <el-input
              prefix-icon="el-icon-view"
              type="password"
              placeholder="请输入密码"
              v-model="RegisterUser.pass"
          ></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item prop="confirmPass">
          <el-input
              prefix-icon="el-icon-view"
              type="password"
              placeholder="请再次输入密码"
              v-model="RegisterUser.confirmPass"
          ></el-input>
        </el-form-item>

        <!-- 输入手机号 -->
        <el-form-item prop="mobile">
          <el-input
              prefix-icon="el-icon-user-solid"
              placeholder="请输入手机号"
              v-model="RegisterUser.mobile"
          ></el-input>
        </el-form-item>

        <!-- 增加的内容 -->
        <el-form-item prop='imageCode'>
          <!-- 图片验证码 -->
          <el-input
              placeholder="输入验证码"
              v-model="RegisterUser.imageCode"
              :style="{width:'60%'}"
          ></el-input>
          <img class='imageCode' v-bind:src="iamgeCodeUrl" alt="图形验证码" @click="genImageCode">
        </el-form-item>
        <!-- 是否同意商城协议 -->
        <el-form-item prop='aggreement'>
          <el-checkbox v-model="aggree">
            <label class='aggreement'>同意'商城用户使用协议'</label>
          </el-checkbox>
          <br>
          <span class="error_tip" v-show="flag">请勾选用户协议</span>
        </el-form-item>

        <!-- 点击注册 -->
        <el-form-item>
          <el-button
              size="medium"
              type="primary"
              @click="Register"
              style="width: 100%"
          >注册
          </el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template> 


<script>
// 生成uuid
import {v4 as uuid4} from 'uuid'

export default {
  name: "MyRegister",
  props: ["register"],
  data() {
    // 用户名的校验方法
    // let 声明块级的变量
    let validateName = (rule, value, callback) => {
      console.log("校验用户名，规则", rule, "用户名", value, "回调函数", callback)
      const nameRule = /^[a-zA-Z]\w{4,15}$/
      if (nameRule.test(value)){
        // 满足规则
        // 向后端发送异步请求，验证用户名是否重复
        this.$axios.get('/Users/' + this.RegisterUser.name)
        .then(ers => {
          console.log('验证用户名的重复性',ers)
          if (ers.data.code == 200){
            // 用户名不重复可以使用
            return callback()
          }else{
            return callback(new Error('用户名已被使用'))
          }
        })
        .catch(err => {
          console.log('验证用户名请求错误',err)
          // prmise  包含错误信息的err对象
          return Promise.reject(err)
        })
        return callback()
      }else{
        return callback(new Error('字母开头,长度5-16之间,允许字母数字下划线'))
      }
      // TODO 校验用户名
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
    };
    // 手机号的校验方法
    let validateMobile = (rule, value, callback) => {
      console.log("校验手机号，规则", rule, "手机号", value, "回调函数", callback)
      let mobileRule = /^1[3-9]\d{9}$/
      if (mobileRule.test(value)){
        this.$axios.get('/dada/' + this.RegisterUser.mobile)
        .then(ers => {
          console.log('手机号验证的响应：',ers)
          if (ers.data.code == 200){
            return callback()
          }else{
            return callback(new Error(ers.data.msg))
          }
        })
        .catch(err => {
          console.log('验证用户名请求错误',err)
          return Promise.reject(err)
        })
        return callback()
      }else{
        return callback(new Error('手机号以1开头，第二位3-9之间的数字，长度11位只允许数字'))
      }
      // TODO 校验手机号
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
    };
    // 密码的校验方法
    let validatePass = (rule, value, callback) => {
      console.log("校验密码，规则", rule, "密码", value, "回调函数", callback)
      let passRule = /^[A-Za-z]\w{6,17}$/
      if (passRule.test(value)){
        return callback()
      }else{
        return callback(new Error("字母开头,长度7-18之间,允许字母数字下划线"))
      }
      // TODO 校验密码
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
    };
    // 确认密码的校验方法
    let validateConfirmPass = (rule, value, callback) => {
      console.log("校验确认密码，规则", rule, "二次输入的密码", value, "回调函数", callback)
      if (this.RegisterUser.confirmPass && this.RegisterUser.confirmPass == this.RegisterUser.pass){
        return callback()
      }else{
        return callback(new Error('两次密码不一致'))
      }
      // TODO 校验确认密码
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
    };
    // 校验图片验证码
    let validateImageCode = (rule, value, callback) => {
      console.log("校验验证码，规则", rule, "二验证码", value, "回调函数", callback)
      let imageRule = /^[a-zA-Z0-9]{4}$/
      if(imageRule.test(value)){
        // 向后端发送请求
        this.$axios.post("/image_code/" + this.imageCodeID + '/',{
          imageCode : this.RegisterUser.imageCode
        })
        .then(res => {
          console.log('图片验证的响应',res)
          // 判断是否成功
          if(res.data.code == 200){
            return callback()
          }else if(res.data.code == 400){
            return callback(new Error('包含字母数字，长度为4'))
          }
        })
        .catch(err => {
          return Promise.reject(err)
        })

        // return callback()
      }else{
        return callback(new Error('包含字母数字，长度为4'))
      }
      // TODO 校验验证码
      // 失败 return callback(new Error("包含字母数字，长度为4"));
      // 成功 return callback();
    };
    return {
      imageCodeID: "",//即生成的uuid
      iamgeCodeUrl: "", //图形验证码的地址
      isRegister: false, // 控制注册组件是否显示
      aggree: false,//是否同意协议
      flag: false, //控制勾选协议的提示
      // 返回的是注册用户信息
      // 占内存
      // 影响拓展性
      // csrf
      RegisterUser: {
        name: "",
        pass: "",
        confirmPass: "",
        mobile: "",
        imageCode: "",//用户输入的图片验证码
      },
      // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
      rules: {
        // 这里的属性值，是prop的值
        name: [{validator: validateName, trigger: "blur"}],
        pass: [{validator: validatePass, trigger: "blur"}],
        confirmPass: [{validator: validateConfirmPass, trigger: "blur"}],
        mobile: [{validator: validateMobile, trigger: "blur"}],
        imageCode: [{validator: validateImageCode, trigger: "blur"}],
      },
    };
  },
// 监视属性
  watch: {
    // 监听父组件传过来的register变量，设置this.isRegister的值
    register: function (val) {
      if (val) {
        this.isRegister = val;
      }
    },
    // 监听this.isRegister变量的值，更新父组件register变量的值
    isRegister: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
        this.$emit("fromChild", val);
      }
    },
  },
  mounted() {
    // DOM节点刚刚完成挂载，生成默认的图形验证码
    this.genImageCode()
  },

  methods: {

    // 生成图片验证码地址
    genImageCode() {
      // 生成一个uuid
      this.imageCodeID = uuid4()
      // 生成一个图片验证码地址
      this.iamgeCodeUrl = "/image_code/" + this.imageCodeID + '/'
    },

    // 用户注册
    Register() {
      // 是否同意用户协议
      if (!this.aggree) {
        this.flag = true
        return
      }
      // 已勾选，则不显示提示信息
      this.flag = false
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          // TODO 注册用户
          // 向后端发送求情
          this.$axios.post('/register/',this.RegisterUser)
          .then(res => {
            console.log('注册的响应：',res)
            // 如果成功对话框消失
            if(res.data.code == 200){
              this.isRegister = false
              this.notifySucceed('注册成功')
            }else{
              this.notifySucceed('注册失败')
            }

            // 待实现
          })
          .catch(err => {
            console.log(err)
            return Promise.reject(err)
            
          })
        } else {
          return false;
        }
      });
    },
  },
};
</script>


<style>
.imageCode {
  /* padding-top:2%; */
  margin-bottom: -12px;
  width: 95px;
  height: 35px;
}

.aggreement {
  font-size: 10px;
  color: blue;
}

.error_tip {
  font-size: 3px;
  color: red;
}
</style>
